<template>
    <div>
        <div id="mount-point">
           
        </div>
        <h3 @click="openfn(1)">
            我是第一个弹框
        </h3>
        <h3  @click="openfn(2)">
            我是第二个弹框
        </h3>
        <h3  @click="openfn(3)">
            我是第三个弹框
        </h3>
        <MydirlogVue :flag="flag1" @event="fn">
            <template #tit>
                <h3>我是第一个弹窗</h3>
            </template>
             <template #content>
                <h3>我是第一个弹窗里的呢绒</h3>
            </template>

        </MydirlogVue>
         <MydirlogVue :flag="flag2" @event="fn">
             <template #tit>
                <h3>我是第2个弹窗</h3>
            </template>
               <template #content>
                <h3>我是第2个弹窗里的呢绒</h3>
            </template>

            
        </MydirlogVue>
         <MydirlogVue :flag="flag3" @event="fn">
              <template #tit>
                <h3>我是第3个弹窗</h3>
            </template>
              <template #content>
                <h3>我是第3个弹窗里的呢绒</h3>
            </template>
            
        </MydirlogVue>
    </div>
</template>

<script>
import Vue from "vue"
let myapp = document.getElementById("mount-point")
// @ 代表src文件夹
// import MydirlogVue from '@/components/Mydirlog.vue'
//   var Profile = Vue.extend({
//   template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
//   data:function() {
//     return {
//       firstName: 'Walter',
//       lastName: 'White',
//       alias: 'Heisenberg'
//     }
//   }
// })
// new Profile().$mount("#mount-point")
export default {
  
    data() {
        return {
            flag1:false,
            flag2:false,
            flag3:false
        }
    },
    // components:{
    //     MydirlogVue
    // },
    methods:{
        openfn(data) {
            if (data === 1) {
                 this.flag1 = true
            } else if (data === 2) {
                this.flag2 = true
            } else {
                this.flag3 = true
            }

           
        },
        fn (data) {
             this.flag1 =data
             this.flag2 =data
             this.flag3 = data
        }

    }
}
</script>

<style>

</style>